<template>
    <div class="chart-box" ref="chart"> </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "ArchivingSituation",
    data() {
        return {
            options: {
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    left: '70%',
                    align: 'left',
                    top: 'middle',
                    icon:'circle',
                    textStyle: {
                        color: '#fff',
                        fontSize:16
                    },
                },
                series: [
                    {
                        type: 'pie',
                        center: ['35%', '50%'],
                        radius: ['40%', '65%'],
                        clockwise: false, //饼图的扇区是否是顺时针排布
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        labelLine: {
                            normal: {
                                length: 5,
                                length2: 3,
                                smooth: true,
                            }
                        },
                        data: [
                            { value: 335, name: "双套归档数", itemStyle: { color: "rgb(134, 140, 255)" } },
                            { value: 310, name: "单套归档数", itemStyle: { color: "rgb(23, 167, 144)" } },
                            { value: 234, name: "混合归档数", itemStyle: { color: "rgb(255, 209, 39)" } },
                        ]
                    }
                ]
            }
        }
    },
    mounted() {
        const chart = echarts.init(this.$refs.chart)
        chart.setOption(this.options)
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 385px;
}
</style>